<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>我喜欢的帖子</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/bootstrap.min.css">
    <style type="text/css">
        html { overflow: scroll; }
        .navbar_container{text-align: center;}
        /*.container_center{border-bottom: 15px solid rgb(242, 242, 242);}*/
        .navbar_bottom_container{text-align: center;padding-top:10px;}
        .navbar_bottom_container span{font-size: 20px;display: inline-block;width:30%;}
        .container_center_user_left{float: left;}
        .container_center_user_left span{font-size: 15px;}
        .container_center_user_right{float: right;}
        .container_center_user_right span{font-size: 15px;}
        .demo_line_02{
            height: 1px;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .demo_line_02 span{
            position: relative;
            top: -8px;
            background: #fff;
            padding: 0 20px;
        }
        .container_handle_tie span{font-size: 25px;display: inline-block;width: 30%;height: 50px;padding-top: 10px;}
        .container_handle_tie_icon_left{float: left;width: 10%;}
        .container_handle_tie_icon_right{float: left;width: 90%;text-align: right;}
        .handle_tie_font{font-size: 14px;display: inline;}
        .contents{padding: 4px 0px 10px; overflow: hidden; line-height: 25px; white-space: pre-wrap; text-align: justify; font-size: 15px;}
        .tie_list{border-bottom: 5px solid #ddd;}
        .content_ti{
            display: inline-block; border: 1px solid rgb(170, 170, 170); color: rgb(170, 170, 170); border-radius: 35px; text-align: center; line-height: 25px; font-size: 14px; padding: 2px 20px; cursor: pointer; margin: 0px 0px 15px;
        }
    </style>
    <script type="text/javascript" src="__JS__/jquery.min.js"></script>
    <script type="text/javascript" src="__JS__/layer.js"></script>
</head>
<body style="padding-bottom: 60px;">
<!-- 中间的“最新”帖子列表 -->
<div class="container container_center news_tie" style="margin-top: 20px;">

</div>
<!-- 中间的“热门”帖子列表 -->
<div class="container container_center hot_tie" style="display: none;">

</div>
<!--分页的“最新帖子”初始参数-->
<input type="hidden" name="pagenum" value="1" id="pagenum">
<input type="hidden" name="pagenum" value="1" id="hot_pagenum">
<input type="hidden" name="totalpage" value="<?php echo $totalpage;?>" id="totalpage">
<input type="hidden" name="hot_totalpage" value="<?php echo $hot_total;?>" id="hot_totalpage">
<div id="nextpage" style="width:100px;height:40px;margin-left:auto;margin-right:auto">
    <button style="float:left;margin-top:10px;" class="btn btn-success" id="more">加载更多</button>
</div>
<!-- 底部导航 -->
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container navbar_bottom_container">
        <span class="glyphicon glyphicon-home"  aria-hidden="true" onclick="home();"></span>
        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true" onclick="publish()"></span>
        <span class="glyphicon glyphicon-user" aria-hidden="true" onclick="ucenter();"><if condition="$count gt 0"><span style="background-color: rgb(239, 64, 86);
            border-radius: 20px;
            position: absolute;
            font-size: 12px;
            width: 18px;
            height: 18px;
            color:rgb(255, 255, 255);
            padding: 2px 4px 2px 5px;
            top:-7px"
        >{$count}</span></if></span>
    </div>
</nav>
<!--JS脚本版块-->
<script type="text/javascript">
    $(function(){
        $('body').scrollTop(Number.MAX_VALUE);
        dataajax('new');
        $("#more").click(function(){
            //判断 最新和热门 哪个版块处于展示状态
                var pagenum = parseInt($('#pagenum').val());
                var nextpage = eval(pagenum+1);
                var totalpage = parseInt($('#totalpage').val());

                if(pagenum>=totalpage){
                    //提示当前 “最新”帖子已到 最后一页了
                    layer.open({
                        content: '当前已到最后一页了哟！！！'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }else{
                    $('#pagenum').val(nextpage);
                    dataajax('new');
                }
    });
    });
    //异步获取 首页帖子的数据
    function dataajax(){
        var pagenum =   $('#pagenum').val();    //当前 “最新”帖子 的分页number
        $.ajax({
            type:'get',
            url:"{:U('Home/Index/ajax_my_like')}",
            data:{pagenum:pagenum},
            dataType:'html',
            success:function(html){
                $('.news_tie').append(html);
            }
        });
    }
    //点赞
    function click_like(obj){
        var tie_id  =   $(obj).attr('tie_id');
        if($(obj).attr('flag')==1){ //已经点赞过了
            $.ajax({
                type:'post',
                url:"{:U('Home/Index/not_like')}",
                data:{id:tie_id},
                dataType:'json',
                success:function(res){
                    if(res.state!=1){
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }else{
                        $(obj).css('color','');
                        $(obj).attr('flag',0);
                        var number  =   parseInt($(obj).next('span').text());
                        $(obj).next('span').text(number-1);
                    }
                }
            });
        }else{
            $.ajax({
                type:'post',
                url:"{:U('Home/Index/like')}",
                data:{id:tie_id},
                dataType:'json',
                success:function(res){
                    if(res.state!=1){
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }else{
                        $(obj).css('color','red');
                        $(obj).attr('flag',1);
                        var number  =   parseInt($(obj).next('span').text());
                        $(obj).next('span').text(number+1);
                    }
                }
            });
        }
    }
    //点击 评论
    function comment(obj){
        var id  =   $(obj).attr('tie_id');
        location.href="{:U('Home/Index/detail','',false)}/id/"+id;
    }
    //举报 首页评论
    function jubao_view(obj){
        var msg_id  =   $(obj).attr('tie_id');

        layer.open({
            content: '<div><button type="button" msg_id="'+msg_id+'" onclick="jubao(this)" class="btn btn-warning" style="width: 90%;">举  报</button></div>'
            ,skin: 'footer'
        });        
    } 
    //点击举报按钮‘
    function jubao(obj){
        var msg_id  =   $(obj).attr('msg_id');
        location.href="{:U('Home/Index/jubao','',false)}/tie_id/"+msg_id;
    }
    //点击 导航条的 发布按钮
    function publish(){
        location.href="{:U('Home/Index/publish')}";
    }
    //点击 导航条的 个人中心
    function ucenter(){
        location.href="{:U('Home/Index/ucenter')}";
    }
    function home() {
        location.href="{:U('Home/Index/index')}";
    }
    function content(obj) {
        var id = $(obj).attr('data-id');
        location.href="{:U('Home/Index/detail','',false)}/id/"+id;
    }
    function con_open(obj) {
        var flag = $(obj).attr('flag');
        if(flag == 0){
            $(obj).siblings('.contents').text($(obj).siblings('.con_2').val());
            $(obj).attr('flag',1);
            $(obj).text('收起');
        }
        if(flag == 1){
            $(obj).siblings('.contents').text($(obj).siblings('.con_1').val());
            $(obj).attr('flag',0);
            $(obj).text('展开全文');
        }
    }
</script>
</body>
</html>